<template>
  <div>
    <div class="container">
      <DataTable
        rowKey="checkDetailId"
        :tableData="Data"
        :btns="btns"
        :tableColumn="tableColumn"
        @refresh="getList"
      >
        <template #sendBias="{row}">
          <span :class="{red: row.sendBias < 0}">{{row.sendBias}}</span>
        </template>
        <template #checkBias="{row}">
          <span :class="{red: row.checkBias < 0}">{{row.checkBias}}</span>
        </template>
      </DataTable>
    </div>
    <a-modal
      title="选择物资"
      :visible="formVisible"
      @ok="addNoCheck()"
      @cancel="hideFormVisible"
      width="70%"
    >
      <div class="dialog-wrap">
            <div class="dialog-left">
                <a-input-search style="margin-bottom: 8px" v-model="code" placeholder="搜索物料分类" @search="searchTree" />
                <a-tree
                    :expanded-keys="expandedKeys"
                    :auto-expand-parent="autoExpandParent"
                    :tree-data="treeData"
                    :replaceFields="replaceFields"
                    @expand="onExpand"
                    @select="selectTree"
                >
                </a-tree>
                <!-- <a-pagination size="small" :total="50" /> -->
            </div>
            <div class="dialog-right">
              <div class="flex">
                <div style="color: rgba(0, 0, 0, 0.45);padding-left:10px">物料编码：</div>
                <a-input-search placeholder="请输入物料编码" style="width: 200px" v-model="searchForm.code" @search="searchWl"/>
              </div>
              <DataTable rowKey="ncMaterielId" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :showConfig="false" :tableData="Data2" :tableColumn="tableColumn2" :pageConfig="pageConfig"></DataTable>
            </div>
        </div>
    </a-modal>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class acceptanceConfig extends Vue {
  formVisible: boolean = false;
  dialogType: string = 'add';
  autoExpandParent: boolean = true
  projectList:any = [];
  expandedKeys: any[] = []
  projectMember:any = [];
  form: any = {};
  code:any = '';
  selectedRowKeys: any[] = []
  treeData:any[] = []
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  };
  replaceFields: any = {
    children: 'child',
    title: 'name',
    key: 'id'
  }
  btns: any[] = [
    {
      label: '新增',
      icon: 'add',
      callback: this.showModel
    }
  ];
  Data: any[] = []
  Data2:any[] = []
  searchForm: any = {
    code: ''
  }
  tableColumn2: any = {
    index: {
      label: '序号',
      width: 120
    },
    ncMaterielCode: {
      label: '材料编码',
      width: 120
    },
    ncMaterielName: {
      label: '材料名称',
      width: 100
    },
    materialspec: {
      label: '规格',
      width: 100
    },
    materialtype: {
      label: '型号',
      width: 100
    }
  }
  tableColumn: any = {
    index: {
      label: '序号',
      width: 120
    },
    ncMaterielCode: {
      label: '材料编码',
      width: 120
    },
    ncMaterielName: {
      label: '材料名称',
      width: 100
    },
    materialspec: {
      label: '规格',
      width: 100
    },
    materialtype: {
      label: '型号',
      width: 100
    },
    // enablestate: {
    //   label: '启动状态',
    //   width: 100,
    //   type:'switch',
    //   callback:this.changSwitch
    // },
    action: {
          label: '操作',
          width: 120,
          template: [
          {
            tag: 'a',
            text: '删除',
            callback: this.delData
          }
        ]
      }
  }
  changePage (val: number) {
    this.pageConfig.current = val;
    this.getTbleData('');
  }
  changSwitch (val:any) {
    console.log(val)
      let query = {
          materialId: val.id,
          status: val.enablestate ? 'off' : 'on'
      }
      // this.$api.checkSettingNoCheckStatusFetch(query).then((res)=>{
      //     if(res.code==0){
      //         this.$message.success('操作成功');
      //       this.getList()
      //     }
      // }).catch()
  }
  onExpand (expandedKeys: any[]) {
    this.expandedKeys = expandedKeys;
    this.autoExpandParent = false;
  }
  selectTree (selectedKeys: any) {
    console.log(selectedKeys, 'selectedKeys')
    console.log('选择树')
    this.getTbleData(selectedKeys[0])
    // this.departId = selectedKeys[0]
    // this.getList()
  }
  showModel () {
      this.formVisible = true;
  }
  hideFormVisible () {
    this.formVisible = false;
    this.selectedRowKeys = [];
  }
  delData (val:any) {
      console.log(val)
      this.$confirm({
      title: '提示',
      content: '是否确定删除？',
      onOk: () => {
        this.$api.checkSettingMonthlyPushDeleteFetch({materialId: val.ncMaterielId}).then((res) => {
          if (res.code === 0) {
                this.$message.success('操作成功');
                this.getList()
          }
        }).catch()
      },
      onCancel: () => {}
    })
  }
  // 获取列表数据
  getList () {
      let data = {}
      this.$api.checkSettingMonthlyPushListFetch(data).then((res:any) => {
          if (res.code === 0) {
              res.data.map((item:any, index:any) => {
                  item.index = Number(index + 1)
              })
              this.Data = res.data
          }
      }).catch()
  }
  onChange (e: any) {
    const value = e.target.value;
    this.code = value
    console.log(value)
    // this.treeValue = value
    this.getTree()
  }
  searchTree () {
    this.getTree()
  }
  // 获取树型结构
  getTree () {
      this.$api.goodsNcMaterielTypeListFetch({code: this.code}).then((res) => {
          if (res.code === 0) {
            this.treeData = res.data
          }
      }).catch()
  }
  // 添加
  addNoCheck () {
      if (this.selectedRowKeys.length === 0) {
        this.$message.error('请选择物料');
        return
      }
      this.$api.checkSettingMonthlyPushFetch({materialIds: this.selectedRowKeys.join(',')}).then((res) => {
          if (res.code === 0) {
              this.$message.success('添加成功');
              this.formVisible = false;
              this.getList()
          }
      }).catch()
  }
  onSelectChange (selectedRowKeys: string[], row: any) {
    this.selectedRowKeys = selectedRowKeys
    console.log(selectedRowKeys, 'selectedRowKeys')
    // this.selectArr = row
  }
  // 搜索物料
  searchWl (val:any) {
    this.getTbleData('')
  }
  // 获取右边的数据
  getTbleData (id:any) {
      let params = {
          page: this.pageConfig.current,
          size: 10,
          id: id,
          code: this.searchForm.code
      }
    this.$api.goodsNcMaterielListPageFetch(params).then((res) => {
        if (res.code === 0) {
            res.data.records.map((item:any, index:any) => {
                item.index = Number(index + 1)
            })
            this.pageConfig.total = res.data.total
            this.Data2 = res.data.records
        }
    }).catch()
  }
  init () {
      this.getList()
      this.getTree()
      this.getTbleData('')
  }
}
</script>
<style lang='scss' scoped>
.dialog-wrap{
    width: 100%;
    display: flex;
    justify-content: space-between;
    height: 500px;
    .dialog-left{
        width: 20%;
        border: 1px solid #bbbbbb;
        overflow: auto;
    }
    .dialog-right{
        width: 80%;
        height: 100%;
        overflow: auto;
    }
}
</style>
